html {-webkit-tap-highlight-color:transparent;}
body {margin:0;}
#mx-bubble {position:relative; height:350px; background:#f5f5f5; padding:2rem;}
#mx-bubble>span{
	position: absolute;
	font: normal 14px 'Microsoft YaHei';
	width: 4rem;
	height: 4rem;
	line-height: 4rem;
	text-align: center;
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
	background: #9ab9e2;
	color: #fff;
	border: 1px solid #9ab9e2;
	cursor: pointer;
	border-radius: 50%;
	transition: border-radius 0.5s, transform 2s;
	-moz-transition: border-radius 0.5s, transform 2s; /* Firefox 4 */
	-webkit-transition: border-radius 0.5s, transform 2s; /* Safari and Chrome */
	-o-transition: border-radius 0.5s, transform 2s; /* Opera */
}
#mx-bubble>span.b1 {
	transform:scale(1.1,1.1);
	transform:scale(1.1,1.1);
	-ms-transform:scale(1.1,1.1); /* IE 9 */
	-moz-transform:scale(1.1,1.1); /* Firefox */
	-webkit-transform:scale(1.1,1.1); /* Safari and Chrome */
	-o-transform:scale(1.1,1.1); /* Opera */
}
#mx-bubble>span.b2 {
	transform:scale(1.2,1.2);
	transform:scale(1.2,1.2);
	-ms-transform:scale(1.2,1.2); /* IE 9 */
	-moz-transform:scale(1.2,1.2); /* Firefox */
	-webkit-transform:scale(1.2,1.2); /* Safari and Chrome */
	-o-transform:scale(1.2,1.2); /* Opera */
}
#mx-bubble>span.b3 {
	transform:scale(1.3,1.3);
	transform:scale(1.3,1.3);
	-ms-transform:scale(1.3,1.3); /* IE 9 */
	-moz-transform:scale(1.3,1.3); /* Firefox */
	-webkit-transform:scale(1.3,1.3); /* Safari and Chrome */
	-o-transform:scale(1.3,1.3); /* Opera */
}
#mx-bubble>span.b4 {
	transform:scale(1.4,1.4);
	transform:scale(1.4,1.4);
	-ms-transform:scale(1.4,1.4); /* IE 9 */
	-moz-transform:scale(1.4,1.4); /* Firefox */
	-webkit-transform:scale(1.4,1.4); /* Safari and Chrome */
	-o-transform:scale(1.4,1.4); /* Opera */
}
#mx-bubble>span.b5 {
	transform:scale(1.5,1.5);
	transform:scale(1.5,1.5);
	-ms-transform:scale(1.5,1.5); /* IE 9 */
	-moz-transform:scale(1.5,1.5); /* Firefox */
	-webkit-transform:scale(1.5,1.5); /* Safari and Chrome */
	-o-transform:scale(1.5,1.5); /* Opera */
}
#mx-bubble>span.b6 {
	transform:scale(1.6,1.6);
	transform:scale(1.6,1.6);
	-ms-transform:scale(1.6,1.6); /* IE 9 */
	-moz-transform:scale(1.6,1.6); /* Firefox */
	-webkit-transform:scale(1.6,1.6); /* Safari and Chrome */
	-o-transform:scale(1.6,1.6); /* Opera */
}
#mx-bubble>span.c1 {
	background: #9ab9e2;
	border: 1px solid #9ab9e2;
}
#mx-bubble>span.c2 {
	border: 1px solid #9ab9e2;
	background-color: #9ab9e2;
}

#mx-bubble>span:active {
	border-radius:43% 47% 50% 45%;
}
